<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<button>点我跳转</button>
		<input type="text" />
		<button>点我缓存</button>
		<button>点我cookie</button>
		<progress value="0" width="100px" height="20px" max="100"></progress>
		
		
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			var btn = document.getElementsByTagName("button");
			var Input = document.getElementsByTagName("input")[0];
			var progress = document.getElementsByTagName("progress")[0];

			btn[0].onclick = function() {
				var inputValue = Input.value;
				window.location.href = "系统对象.html?keyword=" + inputValue;
			}

			btn[1].onclick = function() {
				var inputValue = Input.value;
				localStorage.setItem("keyword", inputValue);
			}

			btn[2].onclick = function() {
				var inputValue = Input.value;
				var d = new Date();
				d.setTime(d.getTime() + 60 * 1000);
				document.cookie = "username" + inputValue;
			}

			var xhr = new XMLHttpRequest();
			var src = "BAAD.mp3";

			xhr.open('get', src, true);

			xhr.send();

			xhr.addEventListener("readystatechange", function(e) {
				var res = e.target;
				if(res.readyState == 4) {
					if(res.state == 200) {
						console.log(123);
					}
				}
			})

			xhr.addEventListener("progress", function(e) {
				console.log(e);
			})

			xhr.onprogress = function(event) {
				if(event.lengthComputable) {
					progress.setAttribute("value", event.loaded);
					progress.setAttribute("max", event.total);

				}
			}

		</script>
	</body>

</html>